// 设备管理页面-设备状态
import { RedoOutlined } from '@ant-design/icons';
import { useQuery } from '@tanstack/react-query';
import { Switch, Table, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
import { useEffect, useState } from 'react';

import api from '@/apis/api';

import Buttons from '../components/buttons';
import ChassisResetModal from '../components/ChassisResetModal';
import MethodSwitchModal from '../components/MethodSwitchModal';
import ReplaceBatteryModal from '../components/ReplaceBatteryModal';

interface DataType {
  id: number;
  fsmState: string;
  dkeyState: string;
  methodRunState: number;
  chassisOpenState: string;
  batteryPower: string;
  serverTemp: string;
  fsTotalKb: string;
  fsFreeKb: string;
  errorCode: string | number;
}

const DeviceStatus: React.FC = () => {
  // 开关状态
  const [switchChecked, setSwitchChecked] = useState<boolean>(false);
  // 弹窗状态
  const [visible, setVisible] = useState<boolean>(false);
  // 复位弹窗状态
  const [resetVisible, setResetVisible] = useState<boolean>(false);
  // 更换电池弹窗状态
  const [replaceVisible, setReplacVisible] = useState<boolean>(false);

  const [deviceStatusTable, setDeviceStatusTable] = useState<DataType[]>([
    // {
    //   id: 1,
    //   fsmState: '就绪',
    //   dkeyState: '就绪',
    //   methodRunState: 1, // 0: 关闭 1: 开启
    //   chassisOpenState: '被入侵', // 被入侵、复位
    //   batteryPower: '需更换',
    //   serverTemp: '45 ℃',
    //   fsTotalKb: '100 KB',
    //   fsFreeKb: '50 KB',
    //   errorCode: '0',
    // },
  ]);
  // 表格属性
  const columns: ColumnsType<DataType> = [
    {
      title: '设备状态',
      dataIndex: 'fsmState',
      key: 'fsmState',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '密码硬件状态',
      dataIndex: 'dkeyState',
      key: 'dkeyState',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '算法运行状态',
      dataIndex: 'methodRunState',
      key: 'methodRunState',
      width: '5%',
      align: 'center',
      fixed: 'left',
      render: (_text) => {
        const checked = _text;
        return (
          <Switch
            checkedChildren="运行"
            unCheckedChildren="停止"
            key={checked ? 1 : 0}
            value={checked}
            onClick={(checked: boolean) => {
              setSwitchChecked(checked);
              setVisible(true);
            }}
          />
        );
      },
    },
    {
      title: '机箱入侵状态',
      dataIndex: 'chassisOpenState',
      key: 'chassisOpenState',
      width: '5%',
      align: 'center',
      fixed: 'left',
      render: (_, record) => {
        return (
          <>
            <div>
              {record?.chassisOpenState}
              <Tooltip title="点此复位">
                <RedoOutlined
                  style={{ marginLeft: 8, cursor: 'pointer', color: '#1677FF' }}
                  onClick={() => {
                    setResetVisible(true);
                    if (record?.chassisOpenState === '被入侵') {
                      setResetVisible(true);
                    }
                  }}
                />
              </Tooltip>
            </div>
          </>
        );
      },
    },
    {
      title: '服务器温度',
      dataIndex: 'serverTemp',
      key: 'serverTemp',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '电池电量',
      dataIndex: 'batteryPower',
      key: 'batteryPower',
      width: '5%',
      align: 'center',
      fixed: 'left',
      render: (_, record) => (
        <div>
          {record?.batteryPower}
          <Tooltip title="点此复位">
            <RedoOutlined
              style={{ marginLeft: 8, cursor: 'pointer', color: '#1677FF' }}
              onClick={() => {
                setReplacVisible(true);
                if (record?.batteryPower === '需更换') {
                  setReplacVisible(true);
                }
              }}
            />
          </Tooltip>
        </div>
      ),
    },
    {
      title: '错误码',
      dataIndex: 'errorCode',
      key: 'errorCode',
      width: '5%',
      align: 'center',
    },
  ];

  const { data: deviceStatus } = useQuery({
    queryKey: ['getDeviceStatus'],
    queryFn: async (params) => {
      const res: any = await api.GetDeviceStatus(params);
      return res.data;
    },
    refetchInterval: 5000,
  });

  useEffect(() => {
    if (deviceStatus) {
      const { items } = deviceStatus;
      if (items.length > 0) {
        setDeviceStatusTable(items);
      } else {
        setDeviceStatusTable([items]);
      }
    }
  }, [deviceStatus]);

  return (
    <>
      {/* 关键字搜索框 */}
      {/* <Filter exportDisabled setKeyword={setKeyword} /> */}
      <div
        style={{
          background: '#fff',
          marginTop: '-24px',
          padding: '24px',
        }}
      >
        {/* 按钮组件 */}
        <Buttons />
      </div>
      <div
        style={{
          background: '#fff',
          padding: '24px',
          marginBottom: '24px',
          marginTop: '24px',
        }}
      >
        {/* 表格 */}
        <div>
          <div>
            <Table
              dataSource={deviceStatusTable}
              columns={columns}
              rowKey={(record) => record.id.toString()}
              pagination={false}
            />
          </div>
        </div>
      </div>
      <MethodSwitchModal
        checked={switchChecked}
        visible={visible}
        setVisible={setVisible}
      />
      <ChassisResetModal visible={resetVisible} setVisible={setResetVisible} />
      <ReplaceBatteryModal visible={replaceVisible} setVisible={setReplacVisible} />
    </>
  );
};
export default DeviceStatus;
